import React, { Component, createRef } from 'react'
import { drawInit } from '../js/draw'
import CtrlLayer from './CtrlLayer'

let canvas

export default class Canvas extends Component {
	constructor(props) {
		super(props)
		this.basicCanv = createRef()
		this.funcFieldCanv = createRef()
		this.paintFieldCanv = createRef()
	}
	render() {
		canvas = this
		return (
			<main>
				<canvas ref={this.basicCanv}></canvas>
				<canvas ref={this.funcFieldCanv}></canvas>
				<canvas ref={this.paintFieldCanv}></canvas>
				<CtrlLayer/>
			</main>
		)
	}
	componentDidMount() {
		drawInit(this.basicCanv.current, this.funcFieldCanv.current, this.paintFieldCanv.current)
	}
}
export { canvas }
